<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>Reading KML Files with Google Maps JavaScript API Version 3</title>

        <style type="text/css">
            html, body, #map_canvas {
                width:   750px;
                height:  600px;
                margin:  0;
                padding: 0;
            }
            #loaddiv
            {
                BORDER-RIGHT: #785e4f 4px groove;
                PADDING-RIGHT: 20px;
                BORDER-TOP: #785e4f 4px groove;
                PADDING-LEFT: 20px;
                FONT-WEIGHT: bold;
                Z-INDEX: 100;
                FILTER: alpha(opacity=75);
                LEFT: 260px;
                PADDING-BOTTOM: 20px;
                MARGIN-LEFT: auto;
                BORDER-LEFT: #785e4f 4px groove;
                WIDTH: 250px;
                MARGIN-RIGHT: auto;
                PADDING-TOP: 20px;
                BORDER-BOTTOM: #785e4f 4px groove;
                POSITION: absolute;
                TOP: 308px;
                BACKGROUND-COLOR: #FFFFFF; /* BACKGROUND-COLOR: #e7b047; */
                TEXT-ALIGN: center;
                opacity: .75
            }
            .infowindow * {font-size: 90%; margin: 0}
        </style>

        <script src="http://maps.google.cn/maps/api/js?region=cn&language=zh-CN&key=AIzaSyB0r0Fg4poGmcg-7dI2NhJeJjHncPIJmsk"></script>

        <script type="text/javascript" src="./kmz/ZipFile.complete.js">
        </script>
        <script type="text/javascript" src="./kmz/geoxml3.js">
        </script>
        <!-- scr -  ipt type="text/javascript" src="ProjectedOverlay.js" -->
        <script type="text/javascript" src ="ProjectedOverlay.js">
        </script>
        <script type="text/javascript">
//<![CDATA[
            var geoXml = null;
            var geoXmlDoc = null;
            var map = null;
            var myLatLng = null;
            var myGeoXml3Zoom = true;
            var sidebarHtml = "";
            var infowindow = null;
            var kmlLayer = null;
            var filename = "../../kmz/test/test.kml";
            var geocoder = new google.maps.Geocoder();
           


            function initialize() {
                myLatLng = new google.maps.LatLng(37.422104808, -122.0838851);
                // these set the initial center, zoom and maptype for the map 
                // if it is not specified in the query string
                var lat = 37.422104808;
                var lng = -122.0838851;
                var zoom = 18;
                var maptype = google.maps.MapTypeId.ROADMAP;


                myLatLng = new google.maps.LatLng(lat, lng);

                var myOptions = {
                    zoom: zoom,
                    center: myLatLng,
                    // zoom: 5,
                    // center: myLatlng,
                    mapTypeId: maptype
                };
                map = new google.maps.Map(document.getElementById("map_canvas"),
                        myOptions);
                infowindow = new google.maps.InfoWindow({});
                showLoad();
                
        var a = performance.now();
                geoXml = new geoXML3.parser({
                    map: map,
                    zoom: myGeoXml3Zoom,
                    infoWindow: infowindow,
                    singleInfoWindow: true,
                    afterParse: useTheData,
                    failedParse: geoxmlErrorHandler
                });
                
        google.maps.event.addListener(geoXml, 'parsed', function () {
                    var b = performance.now();
                    document.getElementById('perf').innerHTML = 'load time ' + ((b - a) / 1000).toFixed(2) + ' seconds';
                    hideLoad();
                });
                
        geoXml.parse(filename);


            }
            ;

            function kmlPgClick(pm, docId) {
                if (geoXml.docs[docId].placemarks[pm].polygon.getMap()) {
                    google.maps.event.trigger(geoXml.docs[docId].placemarks[pm].polygon, "click");
                } else {
                    geoXml.docs[docId].placemarks[pm].polygon.setMap(map);
                    google.maps.event.trigger(geoXml.docs[docId].placemarks[pm].polygon, "click");
                }
            }
            function kmlPlClick(pm, docId) {
                if (geoXml.docs[docId].placemarks[pm].polyline.getMap()) {
                    google.maps.event.trigger(geoXml.docs[docId].placemarks[pm].polyline, "click");
                } else {
                    geoXml.docs[docId].placemarks[pm].polyline.setMap(map);
                    google.maps.event.trigger(geoXml.docs[docId].placemarks[pm].polyline, "click");
                }
            }
            function kmlClick(pm, docId) {
                if (!docId)
                    docId = 0;
                if (!!geoXml && !!geoXml.docs && (geoXml.docs.length > docId) && !!geoXml.docs[docId].placemarks && (geoXml.docs[docId].placemarks.length > pm)) {
                    if (!geoXml.docs[docId].placemarks[pm].marker.getMap()) {
                        geoXml.docs[docId].placemarks[pm].marker.setMap(map);
                        google.maps.event.trigger(geoXml.docs[docId].placemarks[pm].marker, "click");
                    }
                    google.maps.event.trigger(geoXml.docs[docId].placemarks[pm].marker, "click");
                }
            }
            function kmlShowPlacemark(pm, docId) {
                if (!docId)
                    docId = 0;
                if (!geoXml || !geoXml.docs || (geoXml.docs.length <= docId) || !geoXml.docs[docId].placemarks || (geoXml.docs[docId].placemarks.length <= pm))
                    return;
                if (geoXmlDoc.placemarks[pm].polygon) {
                    map.fitBounds(geoXml.docs[docId].placemarks[pm].polygon.bounds);
                } else if (geoXml.docs[docId].placemarks[pm].polyline) {
                    map.fitBounds(geoXml.docs[docId].placemarks[pm].polyline.bounds);
                } else if (geoXml.docs[docId].placemarks[pm].marker) {
                    map.setCenter(geoXml.docs[docId].placemarks[pm].marker.getPosition());
                }
                for (var j = 0; j < geoXml.docs.length; j++) {
                    if (!geoXml.docs[j].placemarks)
                        break;
                    for (var i = 0; i < geoXml.docs[j].placemarks.length; i++) {
                        var placemark = geoXml.docs[j].placemarks[i];
                        if (i == pm) {
                            if (placemark.polygon)
                                placemark.polygon.setMap(map);
                            if (placemark.polyline)
                                placemark.polyline.setMap(map);
                            if (placemark.marker)
                                placemark.marker.setMap(map);
                        } else {
                            if (placemark.polygon)
                                placemark.polygon.setMap(null);
                            if (placemark.polyline)
                                placemark.polyline.setMap(null);
                            if (placemark.marker)
                                placemark.marker.setMap(null);
                        }
                    }
                }
            }


            var highlightOptions = {fillColor: "#FFFF00", strokeColor: "#000000", fillOpacity: 0.9, strokeWidth: 10};
            var highlightLineOptions = {strokeColor: "#FFFF00", strokeWidth: 10};
            function kmlHighlightPoly(pm, docId) {
                for (var j = 0; j < geoXml.docs.length; j++) {
                    if (!geoXml.docs[j].placemarks)
                        break;
                    for (var i = 0; i < geoXml.docs[j].placemarks.length; i++) {
                        var placemark = geoXml.docs[docId].placemarks[i];
                        if ((j == docId) && (i == pm)) {
                            if (placemark.polygon)
                                placemark.polygon.setOptions(highlightOptions);
                            if (placemark.polyline)
                                placemark.polyline.setOptions(highlightLineOptions);
                        } else {
                            if (placemark.polygon)
                                placemark.polygon.setOptions(placemark.polygon.normalStyle);
                            if (placemark.polyline)
                                placemark.polyline.setOptions(placemark.polyline.normalStyle);
                        }
                    }
                }
            }
            function kmlUnHighlightPoly(pm, docId) {
                if (!!geoXml && !!geoXml.docs && (geoXml.docs.length > docId) && !!geoXml.docs[docId].placemarks && (geoXml.docs[docId].placemarks.length > pm)) {
                    var placemark = geoXml.docs[docId].placemarks[pm];
                    if (placemark.polygon)
                        placemark.polygon.setOptions(placemark.polygon.normalStyle);
                    if (placemark.polyline)
                        placemark.polyline.setOptions(placemark.polyline.normalStyle);
                }
            }


            function geoxmlErrorHandler(doc) {
                showParseError();
                alert("GEOXML3: failed parse");
            }
            function useTheData(doc) {
                var currentBounds = map.getBounds();
                if (!currentBounds)
                    currentBounds = new google.maps.LatLngBounds();
                // Geodata handling goes here, using JSON properties of the doc object
                sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';
//  var sidebarHtml = '<table>';
                geoXmlDoc = doc[0];
                if (!geoXml || !geoXml.docs)
                    return;
                for (var j = 0; j < geoXml.docs.length; j++) {
                    for (var i = 0; i < geoXml.docs[j].placemarks.length; i++) {
                        // console.log(doc[0].markers[i].title);
                        var placemark = geoXml.docs[j].placemarks[i];
                        if (placemark.polygon) {
                            if (currentBounds.intersects(placemark.polygon.bounds)) {
                                makeSidebarPolygonEntry(i);
                            }
                            var normalStyle = {
                                strokeColor: placemark.polygon.get('strokeColor'),
                                strokeWeight: placemark.polygon.get('strokeWeight'),
                                strokeOpacity: placemark.polygon.get('strokeOpacity'),
                                fillColor: placemark.polygon.get('fillColor'),
                                fillOpacity: placemark.polygon.get('fillOpacity')
                            };
                            placemark.polygon.normalStyle = normalStyle;

                            highlightPoly(placemark.polygon, i);
                        }
                        if (placemark.polyline) {
                            if (currentBounds.intersects(placemark.polyline.bounds)) {
                                makeSidebarPolylineEntry(i);
                            }
                            var normalStyle = {
                                strokeColor: placemark.polyline.get('strokeColor'),
                                strokeWeight: placemark.polyline.get('strokeWeight'),
                                strokeOpacity: placemark.polyline.get('strokeOpacity')
                            };
                            placemark.polyline.normalStyle = normalStyle;

                            highlightPoly(placemark.polyline, i);
                        }
                        if (placemark.marker) {
                            if (currentBounds.contains(placemark.marker.getPosition())) {
                                makeSidebarEntry(i);
                            }
                        }
                    }
                }
                sidebarHtml += "</table>";
                document.getElementById("sidebar").innerHTML = sidebarHtml;
            }
            ;


            function hide_kml(index) {
                if (!!geoXml && !!geoXml.docs && (index == "*")) {
                    for (var i = 0; i < geoXml.docs.length; i++) {
                        geoXml.hideDocument(geoXml.docs[i]);
                    }
                } else if (!index) {
                    index = 0;
                } else {
                    index = parseInt(index);
                }
                if (!!geoXml && !!geoXml.docs && (geoXml.docs.length > index))
                    geoXml.hideDocument(geoXml.docs[index]);
            }

            function unhide_kml(index) {
                if (!!geoXml && !!geoXml.docs && (index == "*")) {
                    for (var i = 0; i < geoXml.docs.length; i++) {
                        geoXml.showDocument(geoXml.docs[i]);
                    }
                } else if (!index) {
                    index = 0;
                } else {
                    index = parseInt(index);
                }
                if (!!geoXml && !!geoXml.docs && (geoXml.docs.length > index))
                    geoXml.showDocument(geoXml.docs[index]);
            }

            function reload_kml() {
                geoXml.hideDocument();
                delete geoXml;
                geoXml = new geoXML3.parser({
                    map: map,
                    singleInfoWindow: true,
                    afterParse: useTheData
                });
                geoXml.parse(filename);

            }
            function hide_markers_kml() {
                if (!geoXml || !geoXml.docs)
                    return;
                for (var j = 0; j < geoXml.docs.length; j++) {
                    if (!geoXml.docs[j].markers)
                        break;
                    for (var i = 0; i < geoXml.docs[j].markers.length; i++) {
                        geoXmlDoc.markers[i].setVisible(false);
                    }
                }
            }

            function unhide_markers_kml() {
                if (!geoXml || !geoXml.docs)
                    return;
                for (var j = 0; j < geoXml.docs.length; j++) {
                    if (!geoXml.docs[j].markers)
                        break;
                    for (var i = 0; i < geoXml.docs[j].markers.length; i++) {
                        geoXml.docs[j].markers[i].setVisible(true);
                    }
                }
            }

            function hide_polys_kml() {
                if (!geoXml || !geoXml.docs)
                    return;
                for (var j = 0; j < geoXml.docs.length; j++) {
                    if (!geoXml.docs[j].gpolylines)
                        break;
                    for (var i = 0; i < geoXml.docs[j].gpolylines.length; i++) {
                        geoXmlDoc.gpolylines[i].setMap(null);
                    }
                }
            }


// A function to hide the loading message
            function hideLoad()
            {
                var loaddiv = document.getElementById("loaddiv");
                if (loaddiv == null)
                {
                    alert("Sorry can't find the loaddiv");
                    return;
                }
                //div found
                loaddiv.style.visibility = "hidden";
            }

// A function to hide the loading message
            function showLoad()
            {
                var loaddiv = document.getElementById("loaddiv");
                if (loaddiv == null)
                {
                    alert("Sorry can't find your loaddiv");
                    return;
                }
                //div found
                loaddiv.style.visibility = "visible";
            }
            function showParseError()
            {
                var loaddiv = document.getElementById("loaddiv");
                if (loaddiv == null)
                {
                    alert("Sorry can't find your loaddiv");
                    return;
                }
                //div found
                loaddiv.style.visibility = "visible";
                loaddiv.innerHTML = "<b>XML parse error</b>";
            }
            function codeAddress() {
                var address = document.getElementById('address').value;
                geocoder.geocode({'address': address}, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location
                        });
                        if (results[0].geometry.viewport)
                            map.fitBounds(results[0].geometry.viewport);
                        else if (results[0].geometry.bounds)
                            map.fitBounds(results[0].geometry.bounds);
                        else
                            map.setCenter(results[0].geometry.location);

                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
//]]>
        </script>
    </head>
    <body onload="initialize()">
        <h4>Reading a <a href="http://code.google.com/intl/it-IT/apis/kml/documentation/">KML</a> file with Google Maps JavaScript API <a href="http://code.google.com/intl/it-IT/apis/maps/documentation/v3/">Version 3</a> and <a href="http://code.google.com/p/geoxml3/">geoxml3</a>.</h4>
        <div>
            <!--  <button onclick="hide_markers_kml();">hide stars</button>
            <button onclick="unhide_markers_kml();">unhide stars</button> -->
            <!--  <button onclick="hide_polys_kml();">hide polylines</button>
              <button onclick="unhide_polys_kml();">unhide polylines</button> -->
            <button onclick="hide_kml(document.getElementById('docNum').value);">hide</button>
            <button onclick="unhide_kml(document.getElementById('docNum').value);">unhide</button>
            <input type="text" id="docNum" value="*" size="3"></input>
            <button onclick="load_kmlLayer();">load kmlLayer</button>
            <button onclick="hide_kmlLayer();">hide kmlLayer</button>
            <button onclick="show_kmlLayer();">show kmlLayer</button>
            <!--  <button onclick="reload_kml();">reload</button> -->
        </div>
        <div id="loaddiv">Loading.....&#160;&#160;&#160; please wait!<br /></div>
        <table style="width:100%;"><tr><td>
                    <div id="map_canvas">
                    </div>
                </td><td>
                    <div id="sidebar" style="width:300px;height:600px; overflow:auto"></div>
                </td></tr>
            <tr><td colspan="2">    <div id="link"></div></td></tr>
        </table>
        <div id="map_text">
        </div>
        <div id="kmlstatus"></div>
        <div>
            <input id="address" value="" />
            <input id="geocode" value="Geocode" type="button" onclick="codeAddress();" />
        </div>
        <div id="perf"></div>
        <div id="w3valid">
            <a href="http://validator.w3.org/check?uri=referer" ><!-- target="validationresults" --><img
                    src="http://www.w3.org/Icons/valid-xhtml10"
                    alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
        </div> 

    </body>
</html>
